<template>
  <div class="birds">
    <div class="birds_one">
      <!-- 地区项目 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown6">
        <span class="el-dropdown-link">
          地区项目
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-cascader-panel
              v-model="proPtions"
              :props="props"
              :options="options"
              @change="handleChange"
            />
          </el-dropdown-menu>
          <div class="dropdownButtom1">
            <div style="color: #ff8a35"></div>
            <div>
              <a-button style="margin-right: 10px" @click="checkClock6"
                >重置</a-button
              >
              <a-button
                style="background-color: #f43107; color: #fff"
                @click="recognize6"
                >确定</a-button
              >
            </div>
          </div>
        </template>
      </el-dropdown>
      <!-- 中标时间 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown7">
        <span class="el-dropdown-link">
          中标时间
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <div class="block">
              <el-date-picker
                v-model="times"
                type="daterange"
                format="YYYY/MM/DD"
                :disabled-date="disabledDate"
                unlink-panels
                range-separator="至"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                :shortcuts="shortcuts"
                :teleported="true"
                value-format="x"
                :size="size"
                @change="recognize7"
              />
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 招标公司类型 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown3">
        <span class="el-dropdown-link">
          招标公司类型
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <div class="infOne">
              <el-checkbox-group v-model="radio1.Boos" size="large">
                <div
                  class="infOne_hove"
                  v-for="city in biddingBoos"
                  :key="city.id"
                >
                  <el-checkbox :label="city">{{ city.name }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div class="dropdownButtom">
              <div></div>
              <div>
                <a-button style="margin-right: 10px" @click="reClick3"
                  >重置</a-button
                >
                <a-button
                  style="background-color: #f43107; color: #fff"
                  @click="recognize3"
                  >确定</a-button
                >
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- 搜索范围 -->
      <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown12">
        <span class="el-dropdown-link">
          搜索范围
          <img
            style="color: #f43107; width: 14px; height: 8px"
            src="@/assets/img/jt.png"
            alt=""
          />
        </span>

        <template #dropdown>
          <el-dropdown-menu>
            <div
              class="height"
              v-for="item in realm"
              :key="item.id"
              :class="{ active: order == item.id }"
              @click="tagsdrop12(item)"
            >
              {{ item.name }}
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!-- <el-dropdown :hide-on-click="false" trigger="click" ref="dropdown12">
                <span class="el-dropdown-link">
                    搜索范围
                    <img style="color: #F43107; width: 14px; height: 8px" src="@/assets/img/jt.png" alt="" />
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <div class="infOne">
                            <el-checkbox-group v-model="radio1.checkList">
                                <div class="infOne_hove" v-for="city in realm" :key="city.id">
                                    <el-checkbox :label="city" :disabled="city.disabled == 'disabled' ? true : false">{{
                                        city.name
                                    }}</el-checkbox>
                                    <div style="margin-left: 5px" v-if="city.id == '6'">
                                        <el-icon :size="20">
                                            <QuestionFilled />
                                        </el-icon>
                                    </div>
                                </div>
                            </el-checkbox-group>
                        </div>
                        <div class="dropdownButtom">
                            <div></div>
                            <div>
                                <a-button style="margin-right: 10px" @click="reClick12">重置</a-button>
                                <a-button style="background-color: #F43107; color: #fff" @click="recognize12">确定</a-button>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown> -->
    </div>
  </div>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import { onMounted, ref, watch, reactive } from "vue";
import { useSearchStore, useRadio1Store } from "@/pain/search/search";
const props = { multiple: true, checkStrictly: true }; // 地区开启多选
import { timestamp } from "@/utils/index";
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
import { useRouter } from "vue-router";
const route = useRouter();
const store = useSearchStore();
let prerequisite = ref([]);
let times = ref();

const signalsRadio1 = useRadio1Store();
let proPtions = ref([]);
const radio1 = ref({
  Boos: [], //招标公司类型
  times: [
    {
      oneTime: "",
      twoTime: "",
    },
  ], //日期
  //
  leave: [], //省
  market: [], //市
  quarter: [], //区
  checkList: "1", // 搜索范围
});
signalsRadio1.suppliers = radio1.value;

// 招标公司类型
let biddingBoos = ref([
  {
    id: "1",
    name: "国有企业",
  },
  {
    id: "2",
    name: "通讯运营商",
  },
  {
    id: "3",
    name: "军队",
  },
  {
    id: "4",
    name: "银行",
  },
  {
    id: "5",
    name: "证券",
  },
  {
    id: "6",
    name: "保险",
  },
  {
    id: "7",
    name: "民营企业",
  },
  {
    id: "8",
    name: "医院",
  },
  {
    id: "9",
    name: "政府及事业单位",
  },
  {
    id: "10",
    name: "学校",
  },
  {
    id: "11",
    name: "其他",
  },
]);
// 确定取消下拉框
const dropdown3 = ref();
let drop3 = ref([]);
const recognize3 = () => {
  // console.log(radio1.value.Boos)
  signalsRadio1.getsuppliers();
  dropdown3.value.handleClose();
  if (radio1.value.Boos.length > 0) {
    drop3.value = [
      {
        name: "招标公司类型：",
        value: radio1.value.Boos,
      },
    ];
    prerequisite.value = [
      ...drop3.value,
      ...drop6.value,
      ...drop7.value,
      ...drop12.value,
    ];
  }
};
const reClick3 = () => {
  radio1.value.Boos = [];
  drop3.value = [];
};

// 地区
let options = [];
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);
domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});
options = domData.filter((item) => item.parent === 100000);
store.address = options;
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //     children3 = domData.filter((word) => ele.adcode == word.parent);
  //     Reflect.set(ele, "children", children3);
  // });
});
const dropdown6 = ref();
let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});
let drop6 = ref([]);
const recognize6 = () => {
  dropdown6.value.handleClose();
  console.log("valie", proPtions.value);
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });

  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });

  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  radio1.value.leave = Array.from(new Set(state.optionsArr));
  radio1.value.market = Array.from(new Set(state.children2Arr));
  radio1.value.quarter = Array.from(new Set(state.children3Arr));
  signalsRadio1.getsuppliers();

  if (proPtions.value.length > 0) {
    drop6.value = [
      {
        name: "地区：",
        value: [
          {
            name: new Set(state.newList),
          },
        ],
      },
    ];
    prerequisite.value = [
      ...drop3.value,
      ...drop6.value,
      ...drop7.value,
      ...drop12.value,
    ];
  }
};
const checkClock6 = () => {
  radio1.value.quarter = [];
  radio1.value.leave = [];
  radio1.value.market = [];
  state.newArr = [];
  state.newList = [];
  state.optionsArr = [];
  state.children2Arr = [];
  state.children3Arr = [];
  proPtions.value = [];
  drop6.value = [];
  signalsRadio1.suppliers.leave = [];
  signalsRadio1.suppliers.market = [];
  signalsRadio1.suppliers.quarter = [];
};

// 中标时间
const shortcuts = [
  {
    text: "今天",
    value: () => {
      const today = new Date();
      const start = new Date(today);
      start.setHours(0, 0, 0, 0); // 设置为当天的零点
      const end = new Date(today);
      end.setHours(23, 59, 59, 999); // 设置为当天的最后一刻

      return [start, end];
    },
  },
  {
    text: "昨天",
    value: () => {
      const today = new Date();
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1); // 设置为昨天
      const start = new Date(yesterday);
      start.setHours(0, 0, 0, 0); // 设置为昨天的零点
      const end = new Date(yesterday);
      end.setHours(23, 59, 59, 999); // 设置为昨天的最后一刻

      return [start, end];
    },
  },
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
let drop7 = ref([]);

const recognize7 = (value) => {
  if(value == null) return
 
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  radio1.value.times[0] = {
    oneTime: seconds1,
    twoTime: seconds2,
  };
  let shijian = ref([
    {
      name: timestamp(seconds1),
    },
    {
      name: timestamp(seconds2),
    },
  ]);
  if (radio1.value.times.length > 0) {
    drop7.value = [
      {
        name: "时间：",
        value: shijian.value,
      },
    ];
    console.log(drop7);
    prerequisite.value = [
      ...drop3.value,
      ...drop6.value,
      ...drop7.value,
      ...drop12.value,
    ];
  }
  signalsRadio1.getsuppliers();
};
const reClick7 = () => {
  radio1.value.times[0] = {
    oneTime: "",
    twoTime: "",
  };
  drop7.value = [];
  times.value = [];
};
// 搜索范围
const realm = ref([
  {
    id: "1",
    name: "公司名称",
  },
  {
    id: "2",
    name: "产品",
  },
  {
    id: "3",
    name: "品牌",
  },
]);
let order = ref("");
let orderIndex = ref("");
const dropdown12 = ref();
let drop12 = ref([]);
const tagsdrop12 = (item) => {
  radio1.value.checkList = item.id;
  orderIndex.value = item.id;
  order.value = item.id;
  signalsRadio1.getsuppliers();
  if (radio1.value.checkList != "") {
    drop12.value = [
      {
        name: "搜索范围：",
        value: [
          {
            name: item.name,
          },
        ],
      },
    ];
    prerequisite.value = [
      ...drop3.value,
      ...drop6.value,
      ...drop7.value,
      ...drop12.value,
    ];
  }
  dropdown12.value.handleClose();
};

watch(
  prerequisite,
  (newData, oldData) => {
    store.count = newData;
    console.log("watch", store.count);
  },
  { immediate: true, deep: true }
);

const yiyuan = () => {
  if (route.currentRoute.value.query.xmdw == "医院") {
    radio1.Boos = [
      {
        id: "8",
        name: "医院",
      },
    ];
    signalsRadio1.suppliers.Boos = [
      {
        id: "8",
        name: "医院",
      },
    ];
    drop3.value = [
      {
        name: "招标公司类型：",
        value: radio1.Boos,
      },
    ];
    prerequisite.value = [...drop3.value];
    signalsRadio1.getsuppliers();
  }
};

onMounted(() => {
  yiyuan();
});

const gongyingshang = () => {
  reClick3();
  checkClock6();
  reClick7();
  radio1.value.checkList = "";
  signalsRadio1.suppliers = radio1.value;
};
defineExpose({
  gongyingshang,
  reClick3,
  radio1,
  checkClock6,
  reClick7,
});
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  padding: 0;
}

.height {
  width: 100px;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
}

.active {
  background-color: #f43107;
  color: #f6f6f6;
}

.search_input {
  display: flex;
  flex-direction: column;
  margin-left: 175px;

  .search_s {
    position: relative;

    .search_ss {
      // display: flex;
      width: 850px;
      height: 60px;
      margin-top: 50px;
      border-radius: 50px;
      border: 1px solid #f6f6f6;
    }

    .search_buttons {
      position: absolute;
      top: 52px;
      right: 178px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 120px;
      height: 56px;
      background-color: #f43107;
      border-radius: 50px;
      font-size: 22px;
      color: #fff;
    }
  }

  .popular_box {
    margin-top: 20px;
    color: #ffffff;
  }

  .popular {
    margin: 0 15px;
  }
}

.flexible {
  display: flex;

  .flexible_box {
    width: 300px;
    height: 300px;
    padding-left: 21px;
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .flexible_bo2 {
    height: 247px;
    padding-left: 21px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-bottom: 1px solid #e8e8e8;
  }

  .flexible_right {
    // width: 228px;
    flex: 1;
    border-left: 1px solid #e8e8e8;
  }
}

.dropdownButtom1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  padding-bottom: 5px;
}

.dropdownButtom {
  width: 200px;
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #e8e8e8;
  padding-right: 10px;
}

.dropdownButtomCi {
  width: 758px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top: 1px solid #e8e8e8;
}

.dropdownButtoms {
  width: 560px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  border-top: 1px solid #e8e8e8;
}

.infOne {
  height: 300px;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: scroll;

  .infOne_hove {
    display: flex;
    height: 40px;
    align-items: center;
    padding-left: 16px;

    &:hover {
      // background-color: #6675FF;
    }
  }
}

.inputDeep >>> .el-input__inner {
  border: 0;
}

::-webkit-scrollbar {
  display: none;
}

.search_money {
  display: flex;
  align-items: center;
  width: 150px;
  padding-left: 10px;
  margin: 0 5px;
  border-radius: 5px;
  border: 1px solid #9a9898;

  .search_mput {
    width: 50px;
    border: 0;
    outline: none;
  }
}

.search_sousou {
  display: flex;
  width: 260px;
  height: 30px;
  margin: 15px 21px 9px;
}

.birds {
  display: flex;
  flex-direction: column;
  padding: 10px 0;

  .birds_one {
    display: flex;

    .el-dropdown {
      margin-right: 25px;
    }
  }

  .birds_two {
    display: flex;

    .el-dropdown {
      margin-top: 15px;
      margin-right: 25px;
    }
  }
}

.el-checkbox__label {
  font-size: 16px;
}

.el-dropdown-link {
  color: #333;
  font-size: 14px;
}
</style>
